<template>
  <div class="home-page">
    <!-- 欢迎语 -->
    <el-card class="welcome-card">
      <h2>欢迎使用惊喜一餐！</h2>
      <p>探索附近的美味餐厅，享受美食的惊喜吧！</p>
    </el-card>

    <!-- 推荐餐厅 -->
    <div class="recommend-section">
      <h3>推荐餐厅</h3>
      <el-row :gutter="20">
        <el-col v-for="restaurant in recommendedRestaurants" :key="restaurant.id" :span="6">
          <el-card :body-style="{ padding: '10px' }" shadow="hover">
            <img :src="restaurant.image" alt="餐厅图片" class="restaurant-image" />
            <h4>{{ restaurant.name }}</h4>
            <p>评分：{{ restaurant.rating }}/5</p>
            <el-button type="primary" @click="viewDetails(restaurant.id)">查看详情</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendedRestaurants: [
        { id: 1, name: '美味餐厅A', image: '/images/restaurant-a.jpg', rating: 4.8 },
        { id: 2, name: '风味餐厅B', image: '/images/restaurant-b.jpg', rating: 4.7 },
        { id: 3, name: '特色餐厅C', image: '/images/restaurant-c.jpg', rating: 4.9 },
      ],
    };
  },
  methods: {
    viewDetails(id) {
      this.$router.push(`/restaurant/${id}`);
    },
  },
};
</script>

<style scoped>
.home-page {
  padding: 20px;
}
.welcome-card {
  margin-bottom: 20px;
}
.restaurant-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}
</style>
